Referenz · Testfeld (Misc)

Verschiedenes

Ein Sammelplatz für layoutrelevante Klassen, die (noch) auf keiner anderen Doku-Seite stehen. Gedacht als Überblick: Was gibt es noch, wie verhält es sich — und wo sollte es am Ende hin?

Übersicht

Landkarte: Was ist wo dokumentiert?

Damit die Übersicht zurückkommt — welche Bausteine und Klassen auf welcher Seite leben, und was hier im Testfeld gesammelt ist.

Schon dokumentiert

  • Styleguide: Tokens (Farben, Skala, Abstände, Radien), .button-Varianten, .pill, .swatches, .quote, .section--dark.
  • Komponenten: .feature-grid, .cards, .callout, .faq, .stats, .steps, .form, .media.
  • Section Layouts: .cols (alle Varianten), .figure/.round-media, Vollbild .media, .section--tint.
  • Typografie: Headline-Skala, Schnitte, .prose, .lead, .section-intro, .overline.

Hier im Testfeld

  • .lead vs. .section-intro im direkten Vergleich.
  • Das Abstands-System: Overline, Headline, Intro, Blöcke.
  • Layout-Modus .layout-boxed vs. .layout-full.
  • Lesebreite: .prose vs. .prose--wide.
  • Inhaltsverzeichnis .toc.
  • Text-Hilfsklassen .text-primary … .text-disabled.

Lebt woanders

  • .slider (+ Ratio-Varianten) — in der Atelier-Demo.
  • .hero — auf der Startseite.
  • .scrim/.modal — das Feedback-Overlay (auf jeder Seite); .scrim--fullscreen-mobile schaltet es unter 48 em auf Vollbild.
  • .embed-consent — beim Consent-Modul.

Einleitungen

Lead vs. Section-Intro

Beide sind Einleitungssätze auf optimaler Lesebreite (66 Zeichen) und lösen dieselben Layout-Abstände aus. Der Unterschied ist die Stimme: .lead ist eine eigene Größenstufe, .section-intro bleibt Body-Größe.

<p class="lead">

Sag Kitty, was du willst.

Kitty verbindet ein schlankes Website-Kit mit einem geführten KI-Kontext. Der Lead ist etwas größer und ruhiger getönt — der Auftakt einer Seite oder eines Hero.

<p class="section-intro">

Sag Kitty, was du willst.

Kitty verbindet ein schlankes Website-Kit mit einem geführten KI-Kontext. Die Section-Intro bleibt in normaler Textgröße — sie führt in eine Section ein, ohne mit der Headline zu konkurrieren.

Kurz: .lead = eine Größenstufe größer (--text-lead), gedämpfte Farbe — für den Seitenauftakt. .section-intro = Body-Größe, gleiche Lesebreite & Abstände — für die Einleitung innerhalb einer Section.

Abstände

Sections & Heading-Gaps

Die vertikalen Abstände sind nicht per Hand gesetzt, sondern folgen vier Regeln. Links ein echtes Beispiel, rechts welcher Token welchen Abstand erzeugt.

Overline

Beispiel-Headline

Diese Section-Intro sitzt in optimaler Lesebreite direkt unter der Headline. Der Abstand darüber und darunter entsteht rein aus dem System.

0
Inline-Margin
4
Abstands-Regeln
1
System
16px

Overline → Headline. Bewusst eng, damit das Label zur Headline gehört.

--heading-text-gap

Headline → Text (0.66em, skaliert mit der Headline). Liegt als margin-bottom auf der Headline — via :has(), nur wenn wirklich Text folgt.

--content-gap

Intro → Inhaltsblock (fluid ~40–56px). Greift zwischen Headline/Lead/Intro und dem folgenden Block (Cards, Stats, Cols …).

--flow-gap

Text/Code → Buttons oder Swatches innerhalb einer Spalte (32px).

Dazu kommt der Section-Rhythmus: jede Section bringt oben und unten großzügiges Padding mit; ein Farbwechsel (getönt ↔ ungetönt) bekommt über --section-gap-shift etwas mehr Luft, zwei gefüllte Bänder (tint ↔ dark) bilden eine durchgehende Kante.

Layout-Modus

Boxed vs. Full-Width

Eine Klasse am <body> entscheidet, ob der Inhalt als zentrierte Box auf grauem Grund liegt oder randlos durchläuft. Header, Slider und Footer bleiben immer volle Breite.

body.layout-boxed — Box auf grauem Grund, ab 60em mit Schatten und Radius (Standard).
body.layout-full — randlos, kein Schatten (diese Doku-Seiten nutzen das).

Beides teilt sich dieselbe Contentbreite: .container zentriert jeden Textinhalt auf --content-max (1160px) — egal ob das Band voll breit ist oder in der Box sitzt.

Lesebreite

Prose vs. Prose--wide

Fließtext läuft standardmäßig auf optimaler Lesebreite. Für bewusst kurze, breite Absätze gibt es eine Modifier-Klasse.

<div class="prose"> — max. 66ch

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Der Text bricht bewusst bei rund 66 Zeichen um — die angenehmste Lesebreite.

<div class="prose prose--wide"> — volle Breite

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Dieser Absatz nutzt die volle Container-Breite — gut für kurze Hinweise, ungeeignet für lange Lesetexte.

Baustein

Inhalts­verzeichnis

Klasse .toc. Eine getönte Box mit nummerierter Sprungmarken-Liste — z. B. oben auf langen Rechtstexten wie der Datenschutzseite.

Utilities

Text-Hilfsklassen

Klassen .text-primary, .text-secondary, .text-tertiary und .text-disabled. Schnelles Auszeichnen der Text-Gewichtung über die Farb-Tokens.

.text-primary — Haupttext, voller Kontrast.

.text-secondary — ruhiger, für Fließtext-Ergänzungen.

.text-tertiary — Metainfos, Bildunterschriften.

.text-disabled — deaktivierte Zustände.

Utilities

Layout-Primitives

Neutrale Anordnungs-Helfer ohne visuelle Meinung — für gestaltete Seiten, die keine fertige Komponente wollen. Abstände je über ein Custom Property einstellbar.

Baustein

Flow

Klasse .flow. Gleichmäßiger vertikaler Abstand zwischen direkten Kindern; per --flow-space einstellbar.

Baustein

Cluster

Klasse .cluster. Horizontale Gruppe, die bei Bedarf umbricht (Tags, Meta, Buttons); Abstand per --cluster-gap.

Tag Marke Outline Noch einer Solid

Baustein

Grid

Klasse .grid. So viele gleich breite Spalten, wie bei --grid-min passen — ganz ohne Media Queries.

Zurück zur Referenz

Weiterstöbern

Die vollständigen Kataloge: alle Bausteine und das Design-System.

Komponenten Styleguide